import React, {PureComponent} from 'react'
// import Line from '../component/product/table'
import Line from '../component/chart/base-line'
import '../../css/standard.scss'
import '../../css/base-standand-chart.scss'
import {connect} from 'react-redux'
import {millToString,millToDay} from '../util/util'
import {getFpy} from '../action/map.action'
import {setTitle, scale} from '../component/chart/util/common'
import echarts from 'echarts';

class OnceStandard extends PureComponent {
    componentDidMount() {
        const {dispatch} = this.props
        dispatch(getFpy({type: '单板'}))
        dispatch(getFpy({type: '整机'}))
    }

    render() {
        const {signal, complete} = this.props
        return (
            <div>
                <div className="full-container">
                    <div className="standard-chart">
                        <Line config={signal}/>
                    </div>
                    <div className="standard-chart">
                        <Line config={complete}/>
                    </div>
                </div>
            </div>
        )
    }

}

function mapStoreToProps({fpy}) {
    const {signal, complete} = fpy
    const signalProps = {
        title: '各CM厂单板实时一次合格率趋势图',
        xAxisData: signal[Object.keys(signal)[0]] && signal[Object.keys(signal)[0]].values.map(s => millToDay(s.dt)),
        option: {
            yAxis: {
                min: 70,
                max: 100,
                axisLabel: {
                    formatter: '{value}%'
                }
            },
            title: {
                textStyle: {
                    color: '#5BE2EF',
                    fontSize: 14 * scale,
                    fontWeight: 'bolder'
                }
            }
        },
        yAxisData: Object.keys(signal).sort().map(key => {
            return {
                name: key,
                data: signal[key].values.map(s => s.value)
            }
        })
    }
    const completeProps = {
        title: '各CM厂整机实时一次合格率趋势图',
        xAxisData: complete[Object.keys(complete)[0]] && complete[Object.keys(complete)[0]].values.map(s => millToDay(s.dt)),
        option: {
            yAxis: {
                min: 70,
                max: 100,
                axisLabel: {
                    formatter: '{value}%'
                }
            },
            title: {
                textStyle: {
                    color: '#5BE2EF',
                    fontSize: 14 * scale,
                    fontWeight: 'bolder'
                }
            }
        },
        yAxisData: Object.keys(complete).sort().map(key => {
            return {
                name: key,
                data: complete[key].values.map(s => s.value)
            }
        })
    }

    return {signal: signalProps, complete: completeProps}
}

export default connect(mapStoreToProps)(OnceStandard)